.masonryFour-container{
    width: 100%;
    background: #fff;
    
        .head{
            width: 100%;
            padding: 50px 0;
            background: #FAFAFA;
           h2{
               margin-bottom:30px;
               font-size: 30px;
               color: #31364C;
           }
           p{
               color: #aaa;
               margin-bottom: 15px;
           }
        }
        .nav{
            color: #fff;
            width: 100%;
            border: 1px solid;
            height: 70px;
            ul{
                width: 1250px;
                margin: auto;
                li{
                    float: left;
                    margin-right:50px;
                    a{
                        display: inline-block;
                        padding: 30px 0;
                        color: #31364c;
                        border-top: 2px solid #fafafa;
                        &:hover{
                            color:#03B3E3;
                            border-top: 2px solid #03B3E3;
                        }
                    }
                    
                }
            }
        }
        
        .all{
            width: 1250px;
            position: relative;
            margin: 0 auto;
            .grid{
                position: relative;
                width:453px;
                float: left;
                box-shadow: 0 1px 3px rgba(34,25,25,0.4);
                transition: top 1s ease, left 1s ease;
                overflow: hidden;
                img{
                    width: 100%; 
                    transition: transform 1s;
                }
                .title{
                    position: absolute;
                    top:0;
                    left: 20px;
                    color: #fff;
                    h2{
                        margin:30px 0 15px;
                        font-size:24px ;
                    }
                    p{
                        font-size: 12px;
                    }
                }
                .menu{
                    
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    margin: 0 20px 50px;
                    .left{
                        color: #fff;
                        float: left;
                        a{
                            color: #fff;
                            font-size: 12px;
                            &:hover{
                                color: #00BEF2;
                            }
                        }
                    }
                    .right{
                        float: right;
                        position: relative;
                        margin-left: 80px;
                        
                        a{
                            position: absolute;
                            top: -10px;
                            display: inline-block;
                            width: 45px;
                            height: 45px;
                            border-radius: 100%;
                            background: #444;
                            i{
                                display: block;
                                position: absolute;
                                left: 17px;
                                top: 17px;
                                width: 10px;
                                height: 10px;
                                background: url(../img/index-arrow.png) -10px -10px no-repeat;
                            }
                            
                        }
                    }
                }
               
                &:hover .right a{
                    background: #00BEF2;
                }
                &:hover img{
                    transform: scale(1.2,1.2);
                }
            }
        }
        .load-more{
            clear: both;
            margin: auto;
            margin-top: 150px;
            position: relative;
            span{
                position: absolute;
                left: 50%;
                margin-left: -40px;
                display: inline-block;
                padding: 6px 15px;
                color: #777;
                border-radius: 15px;
                border: 1px solid #777;
            }
        }
        @media only screen and (max-width:1260px){
           .head{
               width:auto;
               padding: 30px;
           }
           .all{
               width: auto;
               .grid{
                   
               }
           }
           
       }
       @media only screen and (max-width:1024px){
           .nav{
               display: none;
           }
           
       }
       @media only screen and (max-width:768px){
           .all{
            .grid{
                width: 100%;
            }   
           }
       }
}
#masonryFour-grid{
            padding-bottom: 120px;
        }